<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="Author" content="larry"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" type="text/css" th:href="@{/static/larryms/larry/css/larry.css}" media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/static/larryms/css/admin/base.css}" media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/static/larryms/css/admin/admin.css}" media="all"/>
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="cache-control" content="no-cache"/>
    <meta http-equiv="expires" content="0"/>
</head>
<body class="auth-user">
<div class="layui-fluid">
    <div class="layui-row larryms-panel auth-user-add" style="overflow: auto">
        <form class="layui-form" id="larrymsAdd">
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>类型
                </label>
                <div class="layui-input-block" style="width:190px;">
                    <input type="radio" name="typeNode" value="03" title="菜单"
                           th:attr="checked=${(permission?.typeNode == null or permission?.typeNode == '03') ? 'true' : 'false'}"/>
                    <input type="radio" name="typeNode" value="04" title="功能"
                           th:attr="checked=${(permission?.typeNode == '04') ? 'true' : 'false'}"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="nameNode" class="layui-form-label">
                    <span class="x-red">*</span>名称
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="nameNode" name="nameNode" lay-verify="nameNode"
                           autocomplete="off" class="layui-input larry-input" style="width: 300px;"
                           th:value="${permission?.nameNode}"/>
                </div>
                <div id="ms" class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span><span id="ums">必须填写</span>
                </div>
            </div>
            <div class="layui-form-item" id="pDiv">
                <label for="parentName" class="layui-form-label">
                    父级菜单
                </label>
                <div class="layui-input-block">
                    <input type="hidden" name="pid" id="pid" th:value="${permission?.pid}"/>
                    <input type="hidden" name="nodeId" id="nodeId" th:value="${nodeId}"/>
                    <input type="text" id="parentName" onclick="showTree();" class="layui-input larry-input"
                           lay-verify="parentName"  th:value="${permission?.parentName}"/>
                </div>
                <div id="treeNode" style="display:none; position: absolute;z-index:1000;background-color: white;">
                    <div id="tree"></div>
                </div>
            </div>
            <div class="layui-form-item  larryms-menus-icon">
                <label class="layui-form-label" id="larryICON">图标<i id="larryIconFont" class="larry-icon"></i></label>
                <div class="layui-input-block">
                    <input type="text" name="icon" placeholder="请输入选择或输入图标名称" autocomplete="off"
                           class="layui-input larry-input" id="larryIconInput"
                           th:value="${permission?.icon}"/>
                </div>
                <div class="larry-icon-box">
                    <div class="layui-tab">
                        <div class="larryms-search">
                            <label class="layui-tab-title">icon图标</label>
                            <input type="text" placeholder="请输入要查找的图标名" class="layui-input search_text"
                                   style="display:inline-block;width:50%" autocomplete="off"/>
                            <input type="button" class="inline-block layui-btn layui-btn-sm search_icon"
                                   value="搜索" style="height: 36px"/>
                        </div>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show" id="larry_icon"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="nodeUrl" class="layui-form-label">
                    url
                </label>
                <div class="layui-input-block">
                    <input type="text" id="nodeUrl" name="nodeUrl" lay-verify="nodeUrl" autocomplete="off"
                           class="layui-input larry-input" th:value="${permission?.nodeUrl}"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="nodeCode" class="layui-form-label">
                    <span class="x-red">*</span>权限
                </label>
                <div class="layui-input-block">
                    <input type="text" id="nodeCode" name="nodeCode" lay-verify="nodeCode"
                           autocomplete="off" class="layui-input larry-input"
                           th:value="${permission?.nodeCode}"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="status" class="layui-form-label">
                    <span class="x-red">*</span>状态
                </label>
                <div class="layui-input-block">
                    <input type="checkbox" name="status" id="status" lay-skin="switch"
                           lay-text="启用|停用" lay-filter="statusDemo"
                           th:attr="checked=${(permission?.isIndex == null or permission?.isIndex == 1) ? 'true' : 'false'}"/>
                </div>
            </div>
            <!--<div class="layui-form-item">
                <label for="nodeSort" class="layui-form-label">
                    <span class="x-red">*</span>序号
                </label>
                <div class="layui-input-inline">
                    <input type="orderNum" id="nodeSort" name="nodeSort" lay-verify="nodeSort"
                           autocomplete="off" class="layui-input"/>
                </div>
            </div>-->
            <div th:if="${param.detail == null}">
                <div class="larryms-layer-btn">
                    <span sec:authorize-expr="hasAnyAuthority('sys.menu.save')">
                        <a class="layui-btn layui-btn layui-btn-sm left" lay-submit="" lay-filter="add" id="submit">保存</a>
                        <a class="layui-btn layui-btn layui-btn-sm  layui-btn-danger" id="resetBtn">重置</a>
                        <a class="layui-btn layui-btn layui-btn-sm  layui-btn-primary" id="close">关闭</a>
                    </span>
                </div>
            </div>
        </form>
    </div>
</div>
<script th:src="@{/static/scripts/common/version.js(${T(java.lang.Math).random()})}" type="text/javascript"></script>
<script type="text/javascript" th:src="@{/static/larryms/layui/layui.js}"/>
<script type="text/javascript" th:inline="javascript">/*<![CDATA[*/
var bathPath = /*[[@{/}]]*/ "/", $;
layui.config({
    version: ui.version,
    layertype: 2,
    identified: 'userForm',
    base: bathPath + 'static/larryms/',  //实际使用时，建议改成绝对路径
    rightMenu: "none" // false关闭，设置为custom时使用自定义，不使用默认menu
}).extend({
    larry: 'js/base'
}).use(['larry', 'form', 'tree', 'beoneTree', 'laytpl'], function () {
    var form = layui.form, layer = layui.layer, larryms = layui.larryms
            , beoneTree = layui.beoneTree, laytpl = layui.laytpl, menus = [];
    $ = layui.$;
    var icon = /*[[${permission?.icon}]]*/ '';
    if (icon) {
        $("#larryIconFont").addClass(icon);
    }

    var urlPermission = /*[[@{/system/permission/list(type=page)}]]*/ "/system/permission/list?type=page";
    $.ajax({
        url: urlPermission, async: false, type: 'post', dataType: "json",
        success: function (result) {
            menus = beoneTree.createTreeStructureNodes({items: result.data});
        }
    });
    layui.tree({
        elem: '#tree',
        nodes: menus
        , click: function (node) {
            if (node.typeNode == '04') {
                layer.msg('请勿选择功能', {icon: 5, anim: 6});
                return false;
            }
            $('#pid').val(node.nodeId);
            $('#parentName').val(node.nameNode);
            hideMenu();
        }
    });

    $('#larryIconInput').off('click').on('click', function () {
        getLarryFont(layui.cache.base + 'lib/fonts/');
        $('.larry-icon-box').slideToggle('normal', function () {
            $(this).addClass('on');
        });
    });


    var pName = $("#parentName");
    //自定义验证规则
    form.verify({
        parentName: function (v) {
            var types = document.getElementsByName("typeNode"), typeNode;
            for (var n in types) {
                if (types[n].checked) {
                    typeNode = types[n].value;
                    break;
                }
            }
            if (typeNode == '04' && v.trim() == '') {
                return '父级菜单不能为空';
            }
        },
        nameNode: function (v) {
            if (v.trim() == '') {
                return '名称不能为空';
            }
        }
        , nodeUrl: function (v) {
           /* if (pName.val() && v.trim() == '') {
                return 'url不能为空';
            }*/
        }
        , nodeCode: function (v) {
            if (pName.val() && v.trim() == '') {
                return '权限不能为空';
            }
        }
        //, nodeSort: [/^[0-9]*[1-9][0-9]*$/, '请填写序号(正整数)']
    });

    $('#close').click(function () {
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    });
    $('#resetBtn').on('click', function () {
        $('#larrymsAdd')[0].reset();
    });
    //监听提交
    form.on('submit(add)', function (data) {
        if (data.field.status == 'on') {
            data.field.isIndex = '1';
        } else {
            data.field.isIndex = '0';
        }
        var url = /*[[@{/system/permission/savePermiss}]]*/ "/system/permission/savePermiss";
        $.ajax({
            url: url,
            type: 'post',
            data: data.field,
            async: false, dataType: "json", traditional: true,
            success: function (data) {
                var index = parent.layer.getFrameIndex(window.name);
                larryms.msg(data.msg);
                parent.layer.close(index);
                parent.location.replace(parent.location.href);
            }, error: function () {
                var index = parent.layer.getFrameIndex(window.name);
                larryms.msg('请求失败');
                parent.layer.close(index);
            }
        });
        return false;
    });
    form.render();

    function getLarryFont(fontpath) {
        $('#larry_icon').load(fontpath + 'larry-icon.html', function () {
            var $li = $('#larry_icon ul.icon_lists li');
            $li.off('click').on('click', function () {
                var icon = $(this).children('i').attr('class'),
                        iconArr = icon.split(' ');
                $('#larryIconFont').removeClass().addClass(icon);
                $('#larryIconInput').val(iconArr[2]);
                $('#larryFont').val(iconArr[1]);
                $('#larrymsAdd .larry-icon-box').hide();
            });
            $("#larrymsAdd .search_icon").click(function () {
                var txt = $("#larrymsAdd .search_text").val();
                if ($.trim(txt) != "") {
                    $("#larrymsAdd .icon_lists li").hide().filter(":contains('" + txt + "')").show();
                } else {
                    larryms.message('请输入点什么再搜索吧！', 'error', 1500);
                    $("#larrymsAdd .icon_lists li").show();
                }
            });
            $("#larrymsAdd .search_text").keydown(function () {
                if (event.keyCode == "13") {
                    var txt = $("#larrymsAdd .search_text").val();
                    if ($.trim(txt) != "") {
                        $("#larrymsAdd .icon_lists li").hide().filter(":contains('" + txt + "')").show();
                    } else {
                        larryms.message('请输入点什么再搜索吧！', 'error', 1500);
                        $("#larrymsAdd .icon_lists li").show();
                    }
                }
            });
        });
    }
});

function showTree() {
    var p = $('#parentName');
    var cityObj = p;
    var cityOffset = p.offset();
    var width = p.css('width');
    $('#treeNode').css({
        left: cityOffset.left + 'px',
        top: cityOffset.top + cityObj.outerHeight() + 'px',
        width: width,
        border: '1px solid #e6e6e6'
    }).slideDown('fast');
    $('body').bind('mousedown', onBodyDown);
    $('#treeNode').css('display', 'inline');
}
function hideMenu() {
    $('#treeNode').fadeOut('fast');
    $('body').unbind('blur', onBodyDown);
}
function onBodyDown(event) {
    if (!( event.target.id == 'treeNode' || $(event.target).parents('#treeNode').length > 0)) {
        hideMenu();
    }
}


/*]]>*/</script>
</body>
</html>